<style>
    .kami-tabs {
        margin-bottom: 20px;
        border-bottom: 1px solid #e6e6e6;
    }
    .kami-tabs button {
        padding: 8px 16px;
        margin-right: 5px;
        cursor: pointer;
        border: 1px solid #e6e6e6;
        border-bottom: none;
        background: #f5f5f5;
        border-radius: 4px 4px 0 0;
        transition: all 0.3s ease;
    }
    .kami-tabs button:hover {
        background: #e6e6e6;
    }
    .kami-tabs button.active {
        background: #007bff;
        color: white;
        border-color: #007bff;
        position: relative;
        top: 1px;
    }
    
    form {
        background: #fff;
        padding: 20px;
        border-radius: 4px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
    
    form > div {
        margin-bottom: 15px;
    }
    
    input[type="text"], textarea {
        padding: 8px;
        border: 1px solid #ddd;
        border-radius: 4px;
        width: 100%;
        box-sizing: border-box;
        margin-top: 5px;
    }
    
    textarea {
        min-height: 150px;
        resize: vertical;
    }
    
    input[type="submit"] {
        background: #007bff;
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 4px;
        cursor: pointer;
        transition: background 0.3s;
    }
    
    input[type="submit"]:hover {
        background: #0069d9;
    }
    
    span {
        color: #666;
        font-size: 12px;
        margin-left: 10px;
    }
    
    h2 {
        margin-top: 0;
        padding-bottom: 10px;
        border-bottom: 1px solid #eee;
    }

    .label {
        display: inline-block;
        margin: 15px;
    }
</style>

<div>
    <div class="kami-tabs">
        <button type="button" onclick="switchTab('manual')">手动添加</button>
        <button type="button" class="active" onclick="switchTab('auto')">自动生成</button>
    </div>
</div>
<form id="kami-form" action="{ADMINSCRIPT}?action=plugins&operation=config&do=106&identifier=erling_kami_buy&pmod=admin_kami_buy_create" method="post">
    <input type="hidden" name="formhash" value="{FORMHASH}" />
    <input type="hidden" name="form_action" id="form-action" value="manual">

    <label class="lable">【选择分类】：</label>
        <select name="kami_type">
        <!--{loop $kami_buy_type $kami_type}-->
            <option value="{$kami_type['id']}">【{$kami_type['name']}】「积分类型」：{$extcredits_data[$kami_type['extcredits']]['title']}；「积分」：{$kami_type['credit']}</option>
        <!--{/loop}-->
        </select>

    <lable class="lable">【最后有效日期】：
        <input type="datetime-local" name="kami_expire_time" 
            <!--{if !empty($configs['kami_expire_time']['value'])}-->
            value="{eval echo date('Y-m-d\TH:i', $configs['kami_expire_time']['value']);}"
            <!--{/if}-->
        > 为空表示永久
    
    <div id="manual-section" style="display:none;">
        <lable class="lable">【分隔符】：</lable><span>将按分隔符拆分存入数据库</span><input type="text" name="kami_delimiter" value="{$configs['kami_delimiter']['value']}">
        <lable class="lable">【卡密列表】：</lable>请输入卡密，确保分隔符对应格式正确<textarea id="manual_kami_textarea" name="manual_kami_textarea" rows="10" cols="50" value="{$configs['kami_kami_list']['value']}"></textarea>
        <div style="margin-top: 20px;">
            <input type="submit" name="submit" value="提交" onclick="return submitForm('manual')">
        </div>
    </div>
    <div style="margin: 10px;"></div>
    <div id="auto-section">
        <lable class="lable">【数量】：</lable><input type="number" name="kami_count" value="1" min="1" max="10000">
        <lable class="lable">【长度】：</lable><input type="number" name="kami_length" value="{$configs['kami_length']['value']}" min="1" max="127">
        <div style="margin: 10px;"></div>

        <lable class="lable">【字符类型包含】：</lable><br>
        <!--{eval 
            $char_types = json_decode($configs['kami_char_type']['value'], true);
            $char_type_labels = ['数字', '小写字母', '大写字母', '特殊字符 !@#$%^&*()'];
        }-->
        <!-- 循环遍历字符类型标签 -->
        <!--{loop $char_type_labels $index $label}-->
            <label>
                <input 
                    type="checkbox" 
                    name="kami_char_type[]" 
                    value="1" 
                    <!--{if isset($char_types[$index]) && $char_types[$index] == '1'}-->checked<!--{/if}-->
                />
                {$label}
            </label>
        <!--{/loop}-->
        <div style="margin: 10px;"></div>
        <lable class="lable">【格式模板】：</lable><span>当该值不为空时，默认长度使用这个；可将X替换为随机字符</span><input type="text" name="kami_format" value="{$configs['kami_format']['value']}" placeholder="例如：XXXX-XXXX-XXXX">
        <lable class="lable">【排除相似字符】：</lable><input type="text" name="kami_exclude_similar" value="{$configs['kami_exclude_similar']['value']}" placeholder="例如：0O1Il">
        <lable class="lable">【添加前缀】：</lable><input type="text" name="kami_prefix" value="{$configs['kami_prefix']['value']}">
        <div style="margin-top: 20px;">
            <input type="submit" name="submit" value="提交" onclick="return submitForm('auto')">
        </div>
    </div>
</form>

<script>
function switchTab(tab) {
    document.getElementById('manual-section').style.display = tab === 'manual' ? 'block' : 'none';
    document.getElementById('auto-section').style.display = tab === 'auto' ? 'block' : 'none';
    
    // 更新按钮样式
    document.querySelectorAll('.kami-tabs button').forEach(btn => {
        btn.classList.toggle('active', btn.textContent === (tab === 'manual' ? '手动添加' : '自动生成'));
    });

    
}

function submitForm(type) {
    document.getElementById('form-action').value = type;
    var form = document.getElementById('kami-form');
    if(form && typeof form.submit === 'function') {
        form.submit();
    } else {
        form.dispatchEvent(new Event('submit'));
    }
}
</script>